<template>
  <div>
    <el-card>
      <el-form ref="ruleFormTop" :model="ruleFormTop" label-width="80px">
        <div class="flexs">
          <div>
            <el-form-item label="标题名称">
              <el-input v-model="ruleFormTop.headline" placeholder="请输入标题"></el-input>
            </el-form-item>
          </div>
          <div>
            <el-form-item label="创建时间">
              <div class="block">
                <el-date-picker
                  v-model="ruleFormTop.beginTime"
                  align="right"
                  value-format="yyyy-MM-dd"
                  placeholder="开始时间"
                >
                </el-date-picker>
                <span>-</span>
                <el-date-picker
                  v-model="ruleFormTop.endTime"
                  align="right"
                  value-format="yyyy-MM-dd"
                  placeholder="结束时间"
                >
                </el-date-picker>
              </div>
            </el-form-item>
          </div>
          <div>
            <el-button size="small" type="primary" @click="search">搜索</el-button>
            <el-button size="small" type="primary" @click="reset">重置</el-button>
          </div>
        </div>
      </el-form>
    </el-card>
    <el-card style="margin-top: 10px">
      <div>
        <el-button size="small" type="primary" @click="add">新建</el-button>
      </div>
      <el-table
        :data="tableData"
        border
        style="width: 100%; min-height: 440px; margin-top: 10px"
      >
        <el-table-column type="index" label="序号" width="80">
        </el-table-column>
        <el-table-column prop="headline" label="标题名称"> </el-table-column>
        <el-table-column prop="description" label="描述"> </el-table-column>
        <el-table-column prop="beginTime" label="创建时间"> </el-table-column>
        <el-table-column prop="createBy" label="创建人"> </el-table-column>
        <el-table-column prop="state" label="状态"> 
          <template slot-scope="scope">
                <el-switch
                  v-model="scope.row.state"
                  active-color="#13ce66"
                  inactive-color="#C2C2C2"
                  active-value="0"
                  inactive-value="1"
                  @change="changeSwitch(scope.row)"
                >
                </el-switch>
              </template>
        </el-table-column>
        <el-table-column label="操作" width="160">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="editQuestionnair(scope.row)"
              >编辑</el-button
            >
            <el-button type="text" size="small" @click="removeQuestionnair(scope.row)">删除</el-button>
            <el-button type="text" size="small" @click="release(scope.row)">发布</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-dialog :title="isEdit ? '修改标题' : '添加标题' " :visible.sync="dialogFormVisible">
      <el-form label-position="right" ref="ruleForm" :rules="rules" :model="ruleFormBottom">
        <el-form-item label="标题" label-width="80px">
          <el-input v-model="ruleFormBottom.headline" placeholder="请输入标题"></el-input>
        </el-form-item>
        <el-form-item label="描述" label-width="80px">
          <el-input v-model="ruleFormBottom.description" placeholder="请输入描述"></el-input>
        </el-form-item>
        <el-button size="small" @click="addContent">添加</el-button>
        <div v-for="(item,index) in ruleFormBottom.title" :key="index">
          <el-form-item style="margin-top: 10px">
            <el-input
              v-model="item.questions"
              placeholder="请输入主体内容"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="item.answer" placeholder="请输入内容"></el-input>
          </el-form-item>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <!-- <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addQuestionnaire"
          >确 定</el-button
        > -->
        <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  getQuestionnaireListApi,
  addQuestionnaireApi,
  editQuestionnaireApi,
  removeQuestionnaireApi
} from "@/api/selfStudy/questionnaire.js"
export default {
  data() {
    return {
      ruleFormTop: {
        headline: "",
        beginTime: "",
        endTime: ""
      },
      ruleFormBottom:{
        headline:"",
        description:"",
        title:[
          {
            questions:"",
            answer:""
          }
        ]
      },
      dialogFormVisible: false,
      tableData: [],
      currentPage:1,  // 页码
      total:0,  // 总条数
      rules:{
        headline:[{ required: true, message: '请输入标题', trigger: 'blur'}],
        description:[{ required: true, message: '请输入描述', trigger: 'blur'}],
        title:[{ required: true, message: '请输入描述', trigger: 'blur'}]
      },
      isEdit:false, // 修改添加标识
      headlineContent:'', // 搜索内容
    };
  },
  mounted() {
    this.getQuestionnaireList()
  },
  methods: {
    // 获取列表
    getQuestionnaireList(obj) {
      getQuestionnaireListApi({...obj,pageSize:'10',pageNum:this.currentPage}).then(res=>{
        console.log(res);
        if(res.code === 200) {
          this.tableData = res.rows
          this.total = res.total
        }
      })
    },

    // 重置
    reset() {
      this.ruleFormTop = {}
    },

    add() {
      this.dialogFormVisible = true;
      this.isEdit = false
    },

    // 搜索
    search() {
      // let obj = {
      //   headline:this.headlineContent,
      // }
      let obj = {
        headline: this.ruleFormTop.headline,
        beginTime: this.ruleFormTop.beginTime,
        endTime: this.ruleFormTop.endTime,
      };
      let obj1 = {};
      for (let key in obj) {
        if (
          (obj[key] === 0 || obj[key]) &&
          obj[key].toString().replace(/(^\s*)|(\s*$)/g, "") !== ""
        ) {
          // 保存属性
          obj1[key] = obj[key];
        }
      }
      this.getQuestionnaireList(obj1)
    },

    // 提交  /  修改
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // alert('submit!');
          if(!this.isEdit) {
            addQuestionnaireApi(this.ruleFormBottom).then(res=>{
              console.log(res);
              if(res.code === 200) {
                this.$message({
                  type: 'success',
                  message: '添加成功',
                });
                this.getQuestionnaireList()
                this.dialogFormVisible = false
              }else {
                this.$message({
                  type: 'error',
                  message: '添加失败',
                });
              }
            })
          }else {
            editQuestionnaireApi(this.ruleFormBottom).then(res=>{
              if(res.code === 200) {
                this.$message({
                  type: 'success',
                  message: '修改成功',
                });
                this.getQuestionnaireList()
                this.dialogFormVisible = false
              }else {
                this.$message({
                  type: 'error',
                  message: '修改失败',
                });
              }
            })
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },

    resetForm(formName) {
      this.$refs[formName].resetFields();
    },

    // 删除
    removeQuestionnair(row) {
      removeQuestionnaireApi({id:row.id}).then(res=>{
        console.log(res);
        if(res.code === 200) {
          this.$message({
            type: 'success',
            message: '删除成功',
          });
          this.getQuestionnaireList()
        }else {
          this.$message({
            type: 'error',
            message: '删除失败',
          });
        }
      })
    },

    // 编辑按钮
    editQuestionnair(row) {
      this.dialogFormVisible = true
      this.isEdit = true
      this.ruleFormBottom = row
      this.ruleFormBottom.title = JSON.parse(row.title)
      console.log(row);
    },

    // 修改状态
    changeSwitch(row) {
      console.log(row);
      editQuestionnaireApi({id:row.id,state:row.state}).then(res=>{
        if(res.code === 200) {
          this.$message({
            type: 'success',
            message: '修改成功',
          });
          this.getQuestionnaireList()
        }else {
          this.$message({
            type: 'error',
            message: '修改失败',
          });
        }
      })
    },

    release(row) {
      // this.changeSwitch(row)
      if(row.state == '0') {
        this.$message({
          // type: 'success',
          message: '已发布',
        });
      } else {
        editQuestionnaireApi({id:row.id,state:row.state == null ? '1' : '0' }).then(res=>{
          if(res.code === 200) {
            this.$message({
              type: 'success',
              message: '发布成功',
            });
            this.getQuestionnaireList()
          }else {
            this.$message({
              type: 'error',
              message: '发布失败',
            });
          }
        })
      }
    },

    // 添加主体内容
    addContent() {
      let obj = {
        questions:"",
        answer:""
      }
      this.ruleFormBottom.title.push(obj)
    }
  },
  created() {},
  computed: {},
  watch: {},
};
</script>
<style lang="scss" scoped>
.flexs {
  display: flex;
  justify-content: center;
}
::v-deep .el-card {
  width: 95%;
  margin-left: 2.5%;
}
</style>
